import { Alert } from '@aws-amplify/ui-react';

Register and configure Amplify inside `app.module.ts`

```ts{3-4,7,9,13}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Amplify } from 'aws-amplify';
import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';

import { AppComponent } from './app.component';
import awsconfig from '../aws-exports';

Amplify.configure(awsconfig);

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AmplifyAuthenticatorModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

Open your `angular.json` file, and add `node_modules/@aws-amplify/ui-angular/theme.css` to `styles` array in your `angular.json`. This array is located in `projects.<project-name>.architect.build.options`.

```json{2}
"styles": [
  "node_modules/@aws-amplify/ui-angular/theme.css",
  "src/styles.css"
],
```

Wrap your template with `amplify-authenticator` inside `app.component.html`

```html
<amplify-authenticator>
  <ng-template
    amplifySlot="authenticated"
    let-user="user"
    let-signOut="signOut"
  >
    <h1>Welcome {{ user.username }}!</h1>
    <button (click)="signOut()">Sign Out</button>
  </ng-template>
</amplify-authenticator>
```

<Alert role="none" variation="info" heading="Angular Authenticator v1">
  Looking for a previous version of Authenticator? Checkout the [Authenticator v1 documentation](https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-angular).
</Alert>